<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div id="app"></div>
   <script src="../../js/react.development.js"></script>
   <script src="../../js/react-dom.development.js"></script>
   <script src="../../js/babel.min.js"></script>


    <script type="text/babel">


        // function Welcome(props){ 
        //     return <h1>welcome {props.name}</h1> 
        // }

        class Welcome extends React.Component{

            constructor(props){
                // 构造函数参数
                // console.log('constructor--props',props);

                // Inline Babel script: 'this' is not allowed before super()
                // console.log('super(props) 之前',this.props);

                 super()  // this.props = undefined
                // console.log('super(props) 之前',this.props); //undefined

                // super(props)  // this.props = props
                //此时 this (Welcome 类的实例) 已经挂载this.props = props
                console.log('super(props) 之后',this.props);
            }

            // 默认 自动调用；组件内容 
            render(){
                // this 实例不受contructor 的super() 影响
                console.log(this); //当前类组件实例
                console.log(this.props); // 直接使用props ,react 自动帮我们做的挂载
                const {name} = this.props
                return <h1>welcome {name}</h1> 
            }
        }

        let  e  = <Welcome name='jack'/>
        // console.log(e);
        
       // 判断：type  
       // 如果 函数  自动执行函数，同时props 传入函数  =>真实DOM =>渲染容器中
      //  如果 类组件 , 同new 方式调用 new Welcome(props)=>constructor(props)  
      //  如果 是正常标签 =>   真实DOM =>渲染容器中
        ReactDOM.render(e,document.getElementById('app'))
    </script>
</body>
</html>